<template>
  <div class="Login">
   <h1 id="hygl">老 板 您 好 ！</h1>
    <el-row :gutter="24">
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11" :push="6" style=" margin-top:50px">
        <el-form ref="form" class="container" :model="user" :rules="loginFormRules" label-width="80px">
           <h2>用户登录</h2>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="user.password" show-password ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即登录</el-button>
                <el-button @click="register">立即注册</el-button>
            </el-form-item>
            </el-form>
            </el-col>
            </el-row>
    </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
      return {
        user:{
                username:'',
                password:''
            },
        loginFormRules:{
          username:[
            {required:true, message:'请输入用户名', trigger:'blur'},
            {min:2, max:6, message:'长度在2到6个字符之间', trigger:'blur'}
          ],
          password:[
            {required:true, message:'请输入密码', trigger:'blur'},
            {min:2, max:6, message:'长度在6到9个字符之间', trigger:'blur'}
          ]
        }
      }
  },
  methods:{
        onSubmit(){
          console.log(this.user);
        this.$http.post('/login',this.user)
          .then(res => {
                if(res){
                  console.log(res)
                  localStorage.setItem("loginUser",res.data.data.userId)
                  this.$router.go(0)
                  this.$message({
                    type:'success',
                    message:'登录成功！'
                })
                
                }
            })
            .catch(err => {
                console.error(err); 
                this.$message({
               type:'warning',
                    message:'该用户未激活'
          })
            })
            
        },
        register(){
          this.$router.push('/register')
        }
    },
  
}
</script>

<style>

 .Login {
    background:url("https://img2.baidu.com/it/u=3930453703,322514803&fm=26&fmt=auto&gp=0.jpg") center center / auto 100% rgb(245, 245, 245);
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
    margin-top: -30px;
  }


.container {
    
    border-radius: 15px;
    background-clip: padding-box;
    margin: 8% auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    margin-left: 80%;
    margin-top: -100px;
  }


  #hygl {
    margin-right: 1200px;
    margin-top: 200px;
  
  }
</style>